<template>
  <el-dialog v-dialogDrag :visible.sync="dialogVisible" :title="title" width="1000px" @close="resetForm('ruleForm')">
    <button-group ref="buttonGroup" @submitForm="submitForm('ruleForm')" @cancel="dialogVisible = false" />
    <el-row>
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="90px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="作业单号" prop="reportnoId">
              <el-select v-model="ruleForm.reportnoId" style="width: 100%" filterable>
                <el-option v-for="item in reportList" :key="item.id" :label="item.reportNo" :value="item.id">
                  <div @click="reportListChange(item)">
                    <span>{{ item.reportNo }}{{'【' + item.materialName + '】'}}</span>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="物料名称">
              <el-input v-model="details.materialName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="物料编码">
              <el-input v-model="details.materialCode" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="单位">
              <el-input v-model="details.unit" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="任务数">
              <el-input v-model="details.taskNum" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="可入库数量">
              <el-input v-model="details.canInNum" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="已入库总数">
              <el-input v-model="details.totalInNum" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="完工数量">
              <el-input v-model="details.finishNum" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <h1 class="titleH1">入库信息</h1>
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" size="mini">
        <el-row>
          <el-col :span="8">
            <el-form-item label="入库数量" prop="inNum">
              <el-input-number v-model="ruleForm.inNum" :disabled="ruleForm.reportnoId === ''" :controls="false" style="width: 100%" :precision="0" :min="1" :max="details.canInNum" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="库房名称" prop="wmsId">
              <tree-select ref="treeSelect" :disabled="ruleForm.reportnoId === ''" style="width: 100%" :props="{
                  value: 'id',
                  label: 'wmsName',
                  children: 'children'
              }" :options="treeDataList" :accordion="true" :value="ruleForm.wmsId" search-key="wmsName" @getNode="getValue($event)" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入库单号" prop="inNo">
              <el-input v-model="ruleForm.inNo" :disabled="ruleForm.reportnoId === ''" maxlength="20" show-word-limit />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="入库批号" prop="inBatch">
              <el-input v-model="ruleForm.inBatch" :disabled="ruleForm.reportnoId === ''" maxlength="20" show-word-limit />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入库人" prop="inUserId">
              <el-select v-model="ruleForm.inUserId" :disabled="ruleForm.reportnoId === ''" style="width: 100%">
                <el-option v-for="item in userAllList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入库时间" prop="price">
              <el-date-picker v-model="ruleForm.inDate" :disabled="ruleForm.reportnoId === ''" style="width: 100%" :clearable="false" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期时间" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="入库价格" prop="price">
              <el-input v-model="ruleForm.price" :disabled="ruleForm.reportnoId === ''" maxlength="20" show-word-limit />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="备注" prop="inRemark">
            <el-input v-model="ruleForm.inRemark" :disabled="ruleForm.reportnoId === ''" maxlength="200" type="textarea" rows="2" show-word-limit />
          </el-form-item>
        </el-row>
      </el-form>
    </el-row>
  </el-dialog>
</template>
<script>
import TreeSelect from '@/components/TreeSelect'
import { timeFormatToString } from '@/utils/function'
export default {
  components: { TreeSelect },
  props: {
    userAllList: {
      type: Array,
      default: () => {
        return []
      }
    },
    treeDataList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      title: '',
      ruleForm: {
        reportnoId: '',
        inDate: timeFormatToString(new Date()),
        inUserId: '',
        materialId: '',
        price: '',
        wmsId: '',
        inRemark: '',
        inNum: '',
        inNo: '',
        inBatch: '',
        id: ''
      },
      rules: {
        inNo: [
          { required: true, message: '入库单号不能为空！', trigger: 'blur' }
        ],
        inNum: [
          { required: true, message: '入库数量不能为空！', trigger: 'blur' }
        ],
        reportnoId: [
          {
            required: true,
            message: '作业单号不能为空！',
            trigger: 'change'
          }
        ],
        wmsId: [
          {
            required: true,
            message: '库房名称不能为空！',
            trigger: 'change'
          }
        ]
      },
      dialogVisible: false,
      procedureList: [],
      details: {},
      rows: {},
      reportList: []
    }
  },
  watch: {},
  mounted() {},
  methods: {
    /**
     * @description: 新增编辑
     * @param {*} row
     * @return {*}
     */
    async showDialog(row) {
      this.getReport()
      this.title = '新增'
      this.dialogVisible = true
    },
    /* 获取作业单号 */
    async getReport() {
      const res = await this.$axios.get('/pro/put/getReport')
      if (res.data.code === 200) {
        this.reportList = res.data.data
      }
    },
    /** 库房选择 */
    getValue(value) {
      if (value) {
        this.ruleForm.wmsId = value.id
      } else {
        this.ruleForm.wmsId = ''
      }
    },
    /* 作业单号选择事件 */
    reportListChange(row) {
      this.details = row
      this.ruleForm.inNum = row.canInNum
      this.ruleForm.id = row.id
    },
    /* 新增表单提交 */
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          console.log('a')
          const res = await this.$axios.post('/pro/put/putWms', this.ruleForm)
          if (res?.data.code === 200) {
            this.$notify.success('提交成功！')
            this.dialogVisible = false
            this.$emit('getTableInfo')
          } else {
            this.$notify.error(res.data.msg)
          }
        }
      })
    },
    /**
     * @description: 重置表单
     * @param {*} formName
     * @return {*}
     */
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.ruleForm = {
        reportnoId: '',
        inDate: timeFormatToString(new Date()),
        inUserId: '',
        materialId: '',
        price: '',
        wmsId: '',
        inRemark: '',
        inNum: '',
        inNo: '',
        inBatch: '',
        id: ''
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.nbStyle {
  margin: 5px 0;
  padding: 10px 10px 0 0;
  background: #fafafa;
  border: 1px solid #eee;
}
</style>
